<div class="panel">
    <div class="panel-heading">
        <h3 class="panel-title">Ajax数据源（对象）</h3>
    </div>
    <div class="alert alert-warning" role="alert">
        <p>通过使用 <code>columns.data</code> 选项用于告诉 DataTables 找到每一列的数据源对象中对应的属性</p>
    </div>
    <div class="panel-body">
        <table class="table table-bordered table-hover dataTable table-striped width-full text-nowrap" id="dataTableExample">
            <thead>
            <tr>
                <th>姓名</th>
                <th>职位</th>
                <th>工作地点</th>
                <th>分机号</th>
                <th>入职时间</th>
                <th>年薪</th>
            </tr>
            </thead>
            <tfoot>
            <tr>
                <th>姓名</th>
                <th>职位</th>
                <th>工作地点</th>
                <th>分机号</th>
                <th>入职时间</th>
                <th>年薪</th>
            </tr>
            </tfoot>
        </table>
    </div>
</div>
<div class="panel nav-tabs-horizontal">
    <div class="panel-body" data-approve="nav-tabs">
        <ul class="nav nav-tabs nav-tabs-line" role="tablist">
            <li role="presentation" class="active">
                <a data-toggle="tab" href="#DTJS" aria-controls="DTJS" role="tab" aria-expanded="false">JavaScript</a>
            </li>
            <li role="presentation" class="">
                <a data-toggle="tab" href="#DTAjax" aria-controls="DTAjax" role="tab" aria-expanded="false">AJAX</a>
            </li>
            <li role="presentation">
                <a data-toggle="tab" href="#DTHtml" aria-controls="DTHtml" role="tab" aria-expanded="true">HTML</a>
            </li>
        </ul>
        <div class="tab-content margin-top-15">
            <div class="tab-pane active" id="DTJS" role="tabpanel">
                <pre data-plugin="highlight"><code class="js">$('#dataTableExample').DataTable($.po('dataTable', {
    "ajax": "/data/examples/tables/dt-ajax-2.json",
    "columns": [
        { "data": "name" },
        { "data": "position" },
        { "data": "office" },
        { "data": "extn" },
        { "data": "start_date" },
        { "data": "salary" }
    ]
}));</code></pre>
            </div>
            <div class="tab-pane" id="DTAjax" role="tabpanel">
                <pre data-plugin="highlight"><code class="json">{
    "data": [
        {
            "name": "李霞",
            "position": "系统架构师",
            "salary": "&yen;320,800",
            "start_date": "2011/04/25",
            "office": "北京",
            "extn": "5421"
        },
        {
            "name": "杜重治",
            "position": "会计",
            "salary": "&yen;170,750",
            "start_date": "2011/07/25",
            "office": "上海",
            "extn": "8422"
        },
        {
            "name": "陈锋",
            "position": "初级开发者",
            "salary": "&yen;86,000",
            "start_date": "2009/01/12",
            "office": "深圳",
            "extn": "1562"
        },
        {
            "name": "郑伯宁",
            "position": "高级JavaScript开发者",
            "salary": "&yen;433,060",
            "start_date": "2012/03/29",
            "office": "北京",
            "extn": "6224"
        },
        {
            "name": "施华军",
            "position": "会计",
            "salary": "&yen;162,700",
            "start_date": "2008/11/28",
            "office": "上海",
            "extn": "5407"
        },
        {
            "name": "吴书振",
            "position": "集成专家",
            "salary": "&yen;372,000",
            "start_date": "2012/12/02",
            "office": "南京",
            "extn": "4804"
        },
        {
            "name": "张宁",
            "position": "销售代表",
            "salary": "&yen;137,500",
            "start_date": "2012/08/06",
            "office": "深圳",
            "extn": "9608"
        },
        {
            "name": "马世波",
            "position": "集成专家",
            "salary": "&yen;327,900",
            "start_date": "2010/10/14",
            "office": "上海",
            "extn": "6200"
        },
        {
            "name": "张章",
            "position": "Javascript开发者",
            "salary": "&yen;205,500",
            "start_date": "2009/09/15",
            "office": "深圳",
            "extn": "2360"
        },
        {
            "name": "张竹影",
            "position": "软件工程师",
            "salary": "&yen;103,600",
            "start_date": "2008/12/13",
            "office": "北京",
            "extn": "1667"
        },
        {
            "name": "韩庆福",
            "position": "办公室主管",
            "salary": "&yen;90,560",
            "start_date": "2008/12/19",
            "office": "广州",
            "extn": "3814"
        },
        {
            "name": "刘勇",
            "position": "客户服务",
            "salary": "&yen;342,000",
            "start_date": "2013/03/03",
            "office": "北京",
            "extn": "9497"
        },
        {
            "name": "张忆湫",
            "position": "大区经理",
            "salary": "&yen;470,600",
            "start_date": "2008/10/16",
            "office": "深圳",
            "extn": "6741"
        },
        {
            "name": "尚志兴",
            "position": "高级营销设计师",
            "salary": "&yen;313,500",
            "start_date": "2012/12/18",
            "office": "广州",
            "extn": "3597"
        },
        {
            "name": "杜若芳",
            "position": "大区经理",
            "salary": "&yen;385,750",
            "start_date": "2010/03/17",
            "office": "广州",
            "extn": "1965"
        },
        {
            "name": "杨乔松",
            "position": "营销设计师",
            "salary": "&yen;198,500",
            "start_date": "2012/11/27",
            "office": "广州",
            "extn": "1581"
        },
        {
            "name": "闫跃进",
            "position": "CEO",
            "salary": "&yen;725,000",
            "start_date": "2010/06/09",
            "office": "南京",
            "extn": "3059"
        },
        {
            "name": "孙凯",
            "position": "系统管理员",
            "salary": "&yen;237,500",
            "start_date": "2009/04/10",
            "office": "南京",
            "extn": "1721"
        },
        {
            "name": "赖祥校",
            "position": "软件工程师",
            "salary": "&yen;132,000",
            "start_date": "2012/10/13",
            "office": "广州",
            "extn": "2558"
        },
        {
            "name": "郭晖",
            "position": "人事主管",
            "salary": "&yen;217,500",
            "start_date": "2012/09/26",
            "office": "北京",
            "extn": "2290"
        },
        {
            "name": "贺光明",
            "position": "技术主管",
            "salary": "&yen;345,000",
            "start_date": "2011/09/03",
            "office": "南京",
            "extn": "1937"
        },
        {
            "name": "邓小燕",
            "position": "CMO",
            "salary": "&yen;675,000",
            "start_date": "2009/06/25",
            "office": "南京",
            "extn": "6154"
        },
        {
            "name": "白莉惠",
            "position": "售前支持",
            "salary": "&yen;106,450",
            "start_date": "2011/12/12",
            "office": "南京",
            "extn": "8330"
        },
        {
            "name": "杨海霞",
            "position": "销售代表",
            "salary": "&yen;85,600",
            "start_date": "2010/09/20",
            "office": "成都",
            "extn": "3023"
        },
        {
            "name": "利旭日",
            "position": "CEO",
            "salary": "&yen;1,200,000",
            "start_date": "2009/10/09",
            "office": "广州",
            "extn": "5797"
        },
        {
            "name": "范永胜",
            "position": "开发者",
            "salary": "&yen;92,575",
            "start_date": "2010/12/22",
            "office": "北京",
            "extn": "8822"
        },
        {
            "name": "于怀斌",
            "position": "大区经理",
            "salary": "&yen;357,650",
            "start_date": "2010/11/14",
            "office": "苏州",
            "extn": "9239"
        },
        {
            "name": "赵淑娜",
            "position": "软件工程师",
            "salary": "&yen;206,850",
            "start_date": "2011/06/07",
            "office": "深圳",
            "extn": "1314"
        },
        {
            "name": "张淑杰",
            "position": "COO",
            "salary": "&yen;850,000",
            "start_date": "2010/03/11",
            "office": "深圳",
            "extn": "2947"
        },
        {
            "name": "陈俊军",
            "position": "区域销售",
            "salary": "&yen;163,000",
            "start_date": "2011/08/14",
            "office": "上海",
            "extn": "8899"
        },
        {
            "name": "郭增杰",
            "position": "集成专家",
            "salary": "&yen;95,400",
            "start_date": "2011/06/02",
            "office": "成都",
            "extn": "2769"
        },
        {
            "name": "林云",
            "position": "开发者",
            "salary": "&yen;114,500",
            "start_date": "2009/10/22",
            "office": "广州",
            "extn": "6832"
        },
        {
            "name": "郭述龙",
            "position": "技术作者",
            "salary": "&yen;145,000",
            "start_date": "2011/05/07",
            "office": "广州",
            "extn": "3606"
        },
        {
            "name": "杨军",
            "position": "团队主管",
            "salary": "&yen;235,500",
            "start_date": "2008/10/26",
            "office": "深圳",
            "extn": "2860"
        },
        {
            "name": "张海龙",
            "position": "售后支持",
            "salary": "&yen;324,050",
            "start_date": "2011/03/09",
            "office": "北京",
            "extn": "8240"
        },
        {
            "name": "耿静",
            "position": "营销设计师",
            "salary": "&yen;85,675",
            "start_date": "2009/12/09",
            "office": "深圳",
            "extn": "5384"
        },
        {
            "name": "刘晋荣",
            "position": "办公室主管",
            "salary": "&yen;164,500",
            "start_date": "2008/12/16",
            "office": "深圳",
            "extn": "7031"
        },
        {
            "name": "孙宁",
            "position": "秘书",
            "salary": "&yen;109,850",
            "start_date": "2010/02/12",
            "office": "深圳",
            "extn": "6318"
        },
        {
            "name": "邢洪锐",
            "position": "财务总监",
            "salary": "&yen;452,500",
            "start_date": "2009/02/14",
            "office": "深圳",
            "extn": "9422"
        },
        {
            "name": "陈云云",
            "position": "办公室主管",
            "salary": "&yen;136,200",
            "start_date": "2008/12/11",
            "office": "广州",
            "extn": "7580"
        },
        {
            "name": "张禄",
            "position": "主任",
            "salary": "&yen;645,750",
            "start_date": "2008/09/26",
            "office": "南京",
            "extn": "1042"
        },
        {
            "name": "王增凤",
            "position": "技术支持工程师",
            "salary": "&yen;234,500",
            "start_date": "2011/02/03",
            "office": "苏州",
            "extn": "2120"
        },
        {
            "name": "沈捷",
            "position": "软件工程师",
            "salary": "&yen;163,500",
            "start_date": "2011/05/03",
            "office": "广州",
            "extn": "6222"
        },
        {
            "name": "汪化言",
            "position": "技术支持工程师",
            "salary": "&yen;139,575",
            "start_date": "2009/08/19",
            "office": "上海",
            "extn": "9383"
        },
        {
            "name": "杨正机",
            "position": "开发者",
            "salary": "&yen;98,540",
            "start_date": "2013/08/11",
            "office": "南京",
            "extn": "8327"
        },
        {
            "name": "戴向军",
            "position": "技术支持工程师",
            "salary": "&yen;87,500",
            "start_date": "2009/07/07",
            "office": "深圳",
            "extn": "2927"
        },
        {
            "name": "王延芳",
            "position": "数据分析工程师",
            "salary": "&yen;138,575",
            "start_date": "2012/04/09",
            "office": "苏州",
            "extn": "8352"
        },
        {
            "name": "沈健",
            "position": "软件工程师",
            "salary": "&yen;125,250",
            "start_date": "2010/01/04",
            "office": "南京",
            "extn": "7439"
        },
        {
            "name": "刘伟峰",
            "position": "软件工程师",
            "salary": "&yen;115,000",
            "start_date": "2012/06/01",
            "office": "深圳",
            "extn": "4389"
        },
        {
            "name": "陆先生",
            "position": "初级Javascript开发者",
            "salary": "&yen;75,650",
            "start_date": "2013/02/01",
            "office": "北京",
            "extn": "3431"
        },
        {
            "name": "纪虹羽",
            "position": "销售代表",
            "salary": "&yen;145,600",
            "start_date": "2011/12/06",
            "office": "南京",
            "extn": "3990"
        },
        {
            "name": "肖艳",
            "position": "大区经理",
            "salary": "&yen;356,250",
            "start_date": "2011/03/21",
            "office": "广州",
            "extn": "1016"
        },
        {
            "name": "沈国金",
            "position": "系统管理员",
            "salary": "&yen;103,500",
            "start_date": "2009/02/27",
            "office": "广州",
            "extn": "6733"
        },
        {
            "name": "王燕峰",
            "position": "开发者",
            "salary": "&yen;86,500",
            "start_date": "2010/07/14",
            "office": "深圳",
            "extn": "8196"
        },
        {
            "name": "徐若琳",
            "position": "大区经理",
            "salary": "&yen;183,000",
            "start_date": "2008/11/13",
            "office": "北京",
            "extn": "6373"
        },
        {
            "name": "徐成业",
            "position": "Javascript开发者",
            "salary": "&yen;183,000",
            "start_date": "2011/06/27",
            "office": "苏州",
            "extn": "5384"
        },
        {
            "name": "李岸白",
            "position": "客户服务",
            "salary": "&yen;112,000",
            "start_date": "2011/01/25",
            "office": "南京",
            "extn": "4226"
        }
    ]
}</code></pre>
            </div>
            <div class="tab-pane" id="DTHtml" role="tabpanel">
                <pre data-plugin="highlight"><code class="html">&lt;table class="table table-bordered table-hover dataTable table-striped width-full"&gt;
    &lt;thead&gt;
    &lt;tr&gt;
        &lt;th&gt;姓名&lt;/th&gt;
        &lt;th&gt;职位&lt;/th&gt;
        &lt;th&gt;工作地点&lt;/th&gt;
        &lt;th&gt;分机号&lt;/th&gt;
        &lt;th&gt;入职时间&lt;/th&gt;
        &lt;th&gt;年薪&lt;/th&gt;
    &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tfoot&gt;
    &lt;tr&gt;
        &lt;th&gt;姓名&lt;/th&gt;
        &lt;th&gt;职位&lt;/th&gt;
        &lt;th&gt;工作地点&lt;/th&gt;
        &lt;th&gt;分机号&lt;/th&gt;
        &lt;th&gt;入职时间&lt;/th&gt;
        &lt;th&gt;年薪&lt;/th&gt;
    &lt;/tr&gt;
    &lt;/tfoot&gt;
&lt;/table&gt;</code></pre>
            </div>
        </div>
    </div>
</div>


<script src="/js/examples/tables/data-tables/ajax/objects.js"></script>